<template>
   <div>
      <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item><a href="javascript:;">系统管理</a></el-breadcrumb-item>
         <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="hengxian"></div>

      <el-form :model="config" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
         <el-form-item label="标题" prop="title">
            <el-input v-model="config.title"></el-input>
         </el-form-item>
         <el-form-item label="关键字" prop="keyword">
            <el-input v-model="config.keyword"></el-input>
         </el-form-item>
         <el-form-item label="描述" prop="description">
            <el-input type="textarea" v-model="config.description"></el-input>
         </el-form-item>
         <el-form-item label="网站LOGO" prop="image">
            <el-upload class="avatar-uploader" action="/photos" :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
               <img v-if="config.image" :src="config.image" class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
         </el-form-item>
         <el-form-item label="作者" prop="author">
            <el-input v-model="config.author"></el-input>
         </el-form-item>
         <el-form-item label="公司" prop="company">
            <el-input v-model="config.company"></el-input>
         </el-form-item>
         <el-form-item label="QQ" prop="qq">
            <el-input v-model="config.qq"></el-input>
         </el-form-item>
         <el-form-item label="邮箱" prop="email">
            <el-input v-model="config.email"></el-input>
         </el-form-item>
         <el-form-item label="手机号" prop="mobile">
            <el-input v-model="config.mobile"></el-input>
         </el-form-item>
         <el-form-item label="TEL" prop="tel">
            <el-input v-model="config.tel"></el-input>
         </el-form-item>
         <el-form-item label="传真" prop="fax">
            <el-input v-model="config.fax"></el-input>
         </el-form-item>
         <el-form-item label="ICP备案号" prop="icp">
            <el-input v-model="config.icp"></el-input>
         </el-form-item>
         <el-form-item label="版权" prop="copyright">
            <el-input v-model="config.copyright"></el-input>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" size="mini" @click="updateForm('ruleForm')">保存</el-button>
            <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>

<script>
   export default {
      name: "Home",
      data() {
         return {
            config: {
               image: '',
            },
            rules: {
               title: [
                  {required: true, message: '请输入网站标题', trigger: 'blur'},
                  {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
               ],
               keyword: [
                  {required: true, message: '请输入网站关键字', trigger: 'change'}
               ],
               description: [
                  {required: true, message: '请输入网站描述', trigger: 'change'}
               ],
            },
         }
      },
      created() {
         this.init();
      },
      methods: {
         init() {
            axios.get(`/admin/system/configs`)
               .then((res) => {
                  this.config = res.data;
               })
         },
         //图片上传
         handleAvatarSuccess(res, file) {
            this.config.image = res.msg;
         },
         beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const img = ['image/jpeg', 'image/png', 'image/gif'];
            const isJPG = img.includes(file.type);
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
               this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!');
            }
            if (!isLt2M) {
               this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
         },
         //更新
         updateForm(formName) {
            this.$refs[formName].validate((valid) => {
               if (valid) {
                  axios.put(`/admin/system/configs/${this.config.id}`, this.config)
                     .then((res) => {
                        this.$message({
                           showClose: true,
                           message: '更新系统设置成功~',
                           type: 'success'
                        });
                        this.init();
                     })
               } else {
                  console.log('error submit!!');
                  return false;
               }
            });
         },
         resetForm(formName) {
            this.$refs[formName].resetFields();
         },
      }
   }
</script>

<style scoped>

</style>